the-shape($width, $color, $top=0, $padding=0, $paddingColor=transparent) {
  .the-shape {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;

    &::before, &::after {
      position: relative;
      top: $top;
      content: ' ';
      display: inline-block;
      width: 0;
      height: 0;
      border-width: $width;
      border-style: solid;
    }

    &::before {
      border-color: $paddingColor;
      border-right-color: $color;
      border-left-width: $padding;
    }

    &::after {
      border-color: $paddingColor;
      border-left-color: $color;
      border-right-width: $padding;
    }
  }
}

the-transition() {
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

mobile() {
  @media (max-width: 767px) {
    {block}
  }
}

tablet() {
  @media (min-width: 768px) and (max-width: 991px) {
    {block}
  }
}

desktop() {
  @media (min-width: 992px) {
    {block}
  }
}

circle() {
  border-radius: 50%;
}

random-color($min, $max) {
  return floor(math(0, 'random') * ($max - $min + 1) + $min);
}
